<template>
  <div>
    <a-modal v-bind:visible="isShowAdd" title="新增" @ok="handleOk" :maskClosable="false" @cancel="hanldeCancel">
      <a-form-model
        ref="formRef"
        :rules="ruleForm"
        :model="formData"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 17 }"
      >
        <a-form-model-item label="跟进类型" prop="type">
          <a-select v-model="formData.type" placeholder="选择跟进类型">
            <a-select-option v-for="item in typeOption" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="注册日期" prop="date">
          <a-range-picker v-model="formData.date" @change="onChange" />
        </a-form-model-item>
        <a-form-model-item label="模板内容" prop="content">
          <a-textarea v-model="formData.content" placeholder="输入模板内容" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-model-item>
        <a-form-model-item label="推送周期" prop="value">
          <a-select
            v-model="formData.value"
            mode="tags"
            style="width: 100%"
            placeholder="选择推送周期"
            @change="handleChange"
          >
            <a-select-option v-for="item in 7" :key="item" :value="item.toString()">{{ item }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="推送时间点" prop="time">
          <a-select v-model="formData.time" placeholder="选择推送时间点">
            <a-select-option
              v-for="item in [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22]"
              :key="item"
              :value="item"
            >
              {{ item }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="状态">
          <a-radio-group v-model="formData.status" name="radio">
            <a-radio value="1">开启</a-radio>
            <a-radio value="0">关闭</a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { addContentAPI } from '@/api/follow.js'
export default {
  name: 'AddList',
  props: {
    isShowAdd: {
      type: Boolean,
      default: false
    },
    typeOption: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        content: '',
        start: '',
        end: '',
        period: undefined,
        time: undefined,
        type: undefined,
        value: undefined,
        date: undefined,
        status: '1'
      },
      ruleForm: {
        type: [{ required: true, message: '跟进类型不能为空' }],
        content: [{ required: true, message: '模板内容不能为空' }],
        date: [{ required: true, message: '注册日期不能为空' }],
        value: [{ required: true, message: '推送周期不能为空' }],
        time: [{ required: true, message: '推送时间点不能为空' }]
      }
    }
  },
  methods: {
    handleOk() {
      this.$refs.formRef.validate(async valid => {
        if (!valid) return
        await addContentAPI(this.formData)
        this.$emit('update:isShowAdd', false)
        this.$emit('upload')
        this.$refs.formRef.resetFields()
        this.$message.success('新增成功')
      })
    },

    hanldeCancel() {
      this.$emit('update:isShowAdd', false)
      this.$refs.formRef.resetFields()
    },

    onChange(date, dateString) {
      this.formData.start = dateString[0]
      this.formData.end = dateString[1]
    },

    handleChange(value) {
      this.formData.period = value.toString()
    }
  }
}
</script>

<style lang="less" scoped></style>
